<template>
  <div class="div">
    <div>
      <van-nav-bar
          title="银行卡"
          left-arrow
          @click-left="onClickLeft"
      />
    </div>
    <!--    查询在数据库中是否添加了银行卡信息，使用v-shou进行显示或隐藏-->
    <div class="bank">
      <!--      添加银行卡-->
      <div class="addbank" v-show="!boo" @click="goaddbankcard">
        <div>
          <van-icon name="add" color="#9A9A9AFF" size="3rem"/>
        </div>
        <span>添加银行卡</span>
      </div>
      <!--      展示银行卡信息-->
      <div class="bankmsg" v-show="boo">
        <div class="icon">
          <van-icon name="card" size="2rem" color="#676767FF"/>
        </div>
        <div class="msg">
          <span>{{bank}}</span>
          <span class="span">{{bankCardNum}}</span>
        </div>
        <div class="but">
          <van-button plain type="info" style="width: 60px;height: 30px" @click="relieve">解绑</van-button>
        </div>
      </div>
    </div>
<!--    <div class="check">-->
<!--      &lt;!&ndash;      添加支票&ndash;&gt;-->
<!--      <div class="addcheck" v-show="false" @click="goaddcheck">-->
<!--        <div>-->
<!--          <van-icon name="add" color="#9A9A9AFF" size="3rem"/>-->
<!--        </div>-->
<!--        <span>添加支票</span>-->
<!--      </div>-->
<!--      &lt;!&ndash;      展示支票信息&ndash;&gt;-->
<!--      <div class="checkmsg" v-show="true">-->
<!--        <div class="icon">-->
<!--          <van-icon name="coupon" size="2rem" color="#676767FF"/>-->
<!--        </div>-->
<!--        <div class="msg">-->
<!--          <span>zhi</span>-->
<!--          <span class="span">1234567890</span>-->
<!--        </div>-->
<!--        <div class="but">-->
<!--          <van-button plain type="info" style="width: 60px;height: 30px">解绑</van-button>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
    <van-popup v-model="open"  closeable
               close-icon="close"
               position="bottom"
               :style="{ width: '100%', height: '45%'}">
      <div style="margin: 10px 0">请输入密码</div>
      <van-button size="large" style="width: 50px;height: 30px;float: left;margin-top: -35px;border: 0" @click="onConfirm">确认</van-button>
      <!-- 密码输入框 -->
      <van-password-input
          :value="value"
          :gutter="10"
          :focused="showKeyboard"
          @focus="showKeyboard = true"
      />
      <!-- 数字键盘 -->
      <van-number-keyboard
          maxlength="6"
          v-model="value"
          :show="showKeyboard"
      />
    </van-popup>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      bank:null,
      bankCardNum:null,
      boo:true,
      registerIp:null,
      open:false,
      value:'',
      showKeyboard: true,
      password:'',
      bankMsg:{},
    };
  },
  mounted() {
    let parse = JSON.parse(localStorage.getItem('login'));
    console.log(parse)
    this.password=parse.payPassword
    this.registerIp=parse.registerIp
    this.getBankcard(parse.registerIp)
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: '/mywallet'
      })
    },
    goaddbankcard(){
      this.$router.push({
        path: '/addbankcard'
      })
    },
    goaddcheck(){
      this.$router.push({
        path: '/addcheck'
      })
    },
    // 查询当前用户银行卡信息
    getBankcard(id){
      axios.get('http://localhost:11219/mine/bankcard/getbankcard/'+id).then(res=>{
        console.log(res)
        if(res.data.accountStatus==1){
          this.boo=true
          this.bank=res.data.bank
          this.bankCardNum=res.data.bankCardNum
        }else{
          this.boo=false
        }
      })
    },
    onConfirm(){
      if(this.value.length == 6){
        if(this.value==this.password){
          this.bankMsg.registerIp=this.registerIp
          this.bankMsg.accountStatus=2
          axios.post('http://localhost:11219/mine/bankcard/addbankcard',this.bankMsg).then(res=>{
            if(res.data.code==200){
              this.open=false
              this.value=''
              this.$toast('解绑成功');
              this.getBankcard(this.registerIp)
            }
          })
        }else{
          this.value=''
          this.$toast('密码错误');
        }
      }else{
        this.value=''
        this.$toast('请输入6位数字');
      }
    },
    // 解绑当前银行卡
    relieve(){
      this.open = true;
    }
  }
}
</script>

<style scoped>
.div{
  width: 100%;
  height: 100%;
  position: fixed;
}
.bank{
  width: 95%;
  height: 180px;
  margin-top: 10px;
  margin-left: 10px;
  background-color: #ffffff;
}
.check{
  width: 95%;
  height: 180px;
  margin-top: 10px;
  margin-left: 10px;
  background-color: #ffffff;
}
.addbank div{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 40px;
}
.addbank span{
  font-size: 17px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 100px;
}
.addcheck div{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 40px;
}
.addcheck span{
  font-size: 17px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 100px;
}
.bankmsg .icon{
  float: left;
  margin: 15px;
}
.bankmsg .msg span{
  width: 200px;
  text-align: left;
  font-size: 17px;
  float: left;
}
.bankmsg .msg .span{
  margin-top: 40px;
  margin-left: -200px;
}
.bankmsg .but{
  margin-top: 50px;
  margin-right: -50px;
}
.checkmsg .icon{
  float: left;
  margin: 15px;
}
.checkmsg .msg span{
  width: 100px;
  font-size: 17px;
  text-align: left;
  float: left;

}
.checkmsg .msg .span{
  margin-top: 40px;
  margin-left: -103px;
}
.checkmsg .but{
  margin-top: 50px;
  margin-right: -120px;
}
.van-button::before{
  background-color:transparent!important;
}
</style>
